<template>
  <h2>{{ person }}</h2>
  <h2>x: {{ x }}</h2>
  <button @click="x++">x++</button>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ jobs.j1.salary }}K</h2>
  <h2>车：{{person.car}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="jobs.j1.salary++">增长薪资</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name+='!'">换车名</button>
  <button @click="person.car.price++">换价格</button>
</template>

<script>
import {markRaw, reactive, ref, toRaw, toRefs} from "vue";

export default {
  name: "Demo",
  components: {},
  props: [],
  emits: [], // 用于注册VC的自定义事件，可不写，但会报警
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      jobs: {
        j1: {
          salary: 30
        }
      }
    });

    let x = ref(10);

    function showRawPerson() {
      let p = toRaw(person);
      p.age++;
      console.log(p);
      var xRaw = toRaw(x);
      console.log(xRaw); // 无效
      console.log(xRaw === x); // true。toRaw只能转换由reactive声明的对象。
    }

    function addCar() {
      let car = {name:'奔驰', price: 40}
      // person.car = car;
      person.car = markRaw(car);
    }
    return {
      person,
      ...toRefs(person),
      x,
      showRawPerson,
      addCar
    }
  },
}
</script>

<style scoped>

</style>